Description

The PR includes changes to the data storage model for Data Sources, particularly for Airtable integration, and User Interface improvements for the settings page.

Data Source Storage Model

A new unique field slug is added to the data sources. This field is user configurable as opposed to the uuid which is auto generated. This allows adding data sources in code and referencing them by the slug. Secrets for the data sources can be added in the settings page and can be linked to the data source by the slug.

The base and table fields are updated to store both the id and name for the Airtable base and table. This allows for displaying the name in the UI and using the id in the API calls. The updated storage model for Airtable is -

{
	"id": "rec1234567890",
	"slug": "test-airtable-source",
	"name": "Test Airtable Source",
	"type": "airtable",
	"base": {
		"id": "rec1234567890",
		"name": "Test Airtable Base"
	},
	"table": {
		"id": "rec1234567890",
		"name": "Test Airtable Table"
	}
}

Settings Page UI Improvements

• Replaced the simple list view with a table view for the data sources with the slug, service, meta (to display data source specific information like base and table for Airtable and shop name for Shopify) and actions (add/edit/delete) columns.
• Added spacing between the multiple buttons in the settings list view and form view (add/edit form).
• Added a cancel button to the add/edit form, to allow going back to the list view without unnecessarily saving the form.
• Added slug field to the add/edit form to allow adding data sources by slug.
• Consistently use help attribute for input elements to show extra information for the input like errors, hints, additional data fetched remotely after validation input.

Data Sources List View

Data Sources Form View